<template>
  <div class="lsc-mycenter-member">
    <van-nav-bar
      title="我的会员"
      left-arrow
      @click-left="onClickBack"
    />
    <div class="lsc-mycenter-member-header">
      <van-row>
        <van-col span="8">会员总数</van-col>
        <van-col span="8">总销售额</van-col>
        <van-col span="8">购买次数</van-col>
      </van-row>
      <van-row>
        <van-col span="8">{{memberStatistics.member_num}}</van-col>
        <van-col span="8">{{memberStatistics.total_sale_money}}</van-col>
        <van-col span="8">{{memberStatistics.purchars_num}}</van-col>
      </van-row>
    </div>
    <van-search
      v-model="searchMember"
      show-action
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="lsc-mycenter-member-list">
        <van-row v-for="(item,index) in memberList" :key="index">
          <van-col span="12">{{item.name}}</van-col>
          <van-col span="7">{{item.sale_money}}</van-col>
          <van-col span="4">{{item.purchar_num}}</van-col>
          <van-col span="1"><van-icon name="arrow" @click="getMemberInfo(item.mid)"/></van-col>
        </van-row>
      </div>
    </van-list>
    <!-- 会员信息 -->
    <van-popup v-model="showMember" position="right" :overlay="false" style="width:100%;height:100%">
      <van-nav-bar
        title="会员信息"
        left-arrow
        @click-left="showMember=false"
      />
      <div class="lsc-mycenter-member-base">
        <span>基础信息</span>
        <van-cell-group>
          <van-field
            v-model="memberInfo.name"
            label="收货人"
            disabled
          />
          <van-field
            v-model="memberInfo.mobileno"
            label="联系电话"
            disabled
          />
          <!-- <van-field
            v-model="memberInfo.area"
            label="选择地区"
            disabled
          /> -->
          <van-field
            v-model="addressInfo"
            label="详细地址"
            disabled
          />
        </van-cell-group>
      </div>
      <div class="lsc-mycenter-member-base">
        <span>订单明细</span>
          
        <van-row>
          <van-col span="12">订单号</van-col>
          <van-col span="8">订购时间</van-col>
          <van-col span="4">金额</van-col>
        </van-row>
      
        <div class="lsc-mycenter-member-list">
          <div class="lsc-loading" v-if="!mbOrderList.length" >暂无数据</div>
          <van-row v-for="(item,index) in mbOrderList" :key="index">
            <van-col span="12">{{item.orderno}}</van-col>
            <van-col span="8">{{item.createtime}}</van-col>
            <van-col span="4">{{item.saleMoney}}</van-col>
          </van-row>
          <div 
            class="lsc-loading" 
            v-if="pageOrder.total > mbOrderList.length" 
            @click="onLoadMbOrder(memberInfo.id)" >加载更多...</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'member',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      searchMember: '',
      showMember: false,
      addressInfo: '',
      memberList: [],
      memberInfo: {},
      mbOrderList: [],
      memberStatistics: {},
      loading: false,
      finished: false,
      pageinfo: {
        key: '',
        pagesize: 10,
        pageindex: 0,
        total: 0
      },
      pageOrder: {
        mid: '',
        pagesize: 10,
        pageindex: 1,
        total: 0
      }
    }
  },
  created() {
    this.getMemberStatistics()
  },
  methods: {
    onClickBack() {
      this.$router.push('/mycenter')
    },
    getMemberStatistics() {

      this.axios.get(api.agent.memberStatistics)
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.memberStatistics = res.data.data
          }
        })
    },
    getMemberItems() {
      this.axios.get(api.agent.memberItems, {params: this.pageinfo})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.memberList = res.data.data ? this.memberList.concat(res.data.data) : []
            this.pageinfo.total = res.data.pageinfo.total
            this.searchMember = ''
          }
        })
    },
    getMemberInfo(id) {
      this.showMember = true
      this.axios.get(api.agent.memberInfo, {params: {mid: id}})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.memberInfo = res.data.data
            this.addressInfo = `${this.memberInfo.province_name}${this.memberInfo.city_name}${this.memberInfo.address}`
            this.getMbOrderItems(this.memberInfo.id)
          }
        })
    },
    getMbOrderItems(id) {
      this.pageOrder.mid = id
      this.axios.get(api.agent.mbOrderItems, {params: this.pageOrder})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.mbOrderList = res.data.data ? this.mbOrderList.concat(res.data.data) : []
            this.pageOrder.total = res.data.pageinfo.total
          }
        })
    },
    onSearch() {
      if(!this.searchMember) return
      this.memberList = []
      this.pageinfo.pageindex = 1
      this.pageinfo.key = this.searchMember
      this.getMemberItems()
    },
    onLoad() {
      
      this.loading = true;
      this.pageinfo.pageindex += 1
      setTimeout(()=>{
          
        this.axios.get(api.agent.memberItems, {params: this.pageinfo})
          .then((res) => {
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.memberList = res.data.data ? this.memberList.concat(res.data.data) : []
              this.pageinfo.total = res.data.pageinfo.total
              this.searchMember = ''
              this.loading = false;
              if (this.memberList.length >= res.data.pageinfo.total) {
                this.finished = true;
              }else {
                this.finished = false;
              }
            }
          })
      }, 1000)
    },
    onLoadMbOrder(id) {
      this.pageOrder.pageindex += 1
      this.getMbOrderItems(id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-search__action>div {
  padding: 0 10px;
}
.lsc-mycenter-member-header {
  padding-top: 20px;
  background: #c7a819;
  color: #fff;
  text-align: center;
}
.lsc-mycenter-member-header>div>div {
  padding-bottom: 10px;
}
.lsc-mycenter-member-list {
  background: #fff;
  padding: 10px;
}
.lsc-mycenter-member-list>.van-row {
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
}
.lsc-mycenter-member-list>.van-row:last-child {
  border-bottom: 0;
}

.lsc-mycenter-member-base {
}
.lsc-mycenter-member-base span {
  line-height: 40px;
  background: #e5e5e5;
  display: block;
  padding-left: 10px;
  font-size: 14px;
}
.lsc-mycenter-member-base>.van-row {
  padding: 0 10px;
  margin-top: 10px;
}
</style>
